<template>
  <div class="upload-list">
    <div class="demo-upload-list" v-for="(item, index) in uploadList" :key="index">
      <template class="flex">

        <img :src="item" />
        <div class="demo-upload-list-cover">
          <el-icon @click.native="handleView(item)" color="#fff">
            <i-ep-view />
          </el-icon>
          <el-icon @click.native="handleRemove(item, index)" color="#fff">

            <i-ep-delete />
          </el-icon>
        </div>

      </template>
    </div>

    <div v-if="uploadList.length < maxCount">
      <el-upload class="single-uploader flex " action="#" :before-upload="beforeUpload" :http-request="uploadFile"
        :show-file-list="false">
        <div>
          <!-- <el-image class="image" :src="imgUrl" v-if="imgUrl" fit="contain" /> -->
          <el-icon class="icon">
            <i-ep-plus />
          </el-icon>
          <p>上传图片</p>

        </div>
      </el-upload>

    </div>

    <cusDialog ref="imgLogRef" width="450px">
      <img :src="uploadList[0]" style="width: 100%;height: 100%;" />
    </cusDialog>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router"
const router = useRouter();
import {
  upUserAvatar
} from "@/api/business/user";

/**
 * @param action  请求URL * 
 * @param upApi 上传接口
 * @param maxCount  最大上传数量
 * @param accept 接受上传的文件类型
 */
const props = defineProps({
  action: {
    type: String,
    default: "",
  },
  upApi: {
    type: Function,
    default: upUserAvatar
  },
  img: {
    type: Array,
    default: () => {
      return [];
    },
  },

  maxCount: {
    type: Number,
    default: 1,
  },
});

// 上传的列表
const uploadList = ref([])

// 需要删除的图片资源列表
const deleteList = ref([])

watch(
  () => props.img,
  (val) => {
    console.log(val, 777)
    uploadList.value = val
  }, { immediate: true }
)


const emits = defineEmits<{
  (event: 'success', data: string): void;
  (event: 'delete', data: void): void;
}>()


const handleRemove = (item, index) => {
  uploadList.value.splice(index, 1);
  ElMessage.success('图片删除成功')
  emits('delete')
}

const imgLogRef = ref(null)
const handleView = () => {
  imgLogRef.value.show = true
}

// 自定义上传逻辑
const uploadFile = (params) => {
  const file = params.file;
  // 使用FormData传参数和文件
  var form = new FormData();
  // 文件
  form.append("file", file);

  // 调用封装好的上传方法，传给后台FormData
  props.upApi(form).then(res => {
    if (res.code === 1) {
      ElMessage.success('图片上传成功')
      uploadList.value.push(res.data.downloadUrl)
      emits('success', res.data.downloadUrl);
    } else {
      ElMessage.error(res.msg)
    }
  })
}


</script>

<style lang="scss" scoped>
::v-deep .el-upload--picture-card {
  width: 100%;
  height: 100%;
}

.upload-list {
  display: flex;
  align-items: center;
  /*padding-bottom: 25px;*/
}

.demo-upload-list {
  width: 104px;
  height: 104px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px var(--el-border-color) solid;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: flex;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

.single-uploader {
  overflow: hidden;
  width: 100px;
  height: 100px;
  cursor: pointer;
  border: 1px var(--el-border-color) solid;
  border-radius: 6px;

  justify-content: center;

  &:hover {
    border-color: var(--el-color-primary);
  }

}

.image {
  display: block;
  width: 100%;
  height: 100%;
}

.icon {
  width: 100%;
  height: 100%;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
</style>